<template>
  <div class="free-trial">
    <div class="bg">
      <img @click="tiaozhuan(banner.url)" :src="banner.image" />
    </div>
    <div class="box">
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          >
        <ul>
          <li @click="details(item.goods_id)" v-for="(item,index) in shiyong" :key="index">
            <img :src="item.goods_img" />
            <p class="p1">所需积分<span>{{item.exchange_integral}}</span></p>
            <p class="p2">{{item.goods_name}}</p>
            <p class="p3">剩余{{item.goods_number}}份</p>
            <p class="p4" v-if="item.exchange_integral == 0">免费申请</p>
            <p class="p4" v-if="item.exchange_integral != 0">积分兑换</p>
          </li>
        </ul>
      </van-list>
    </div>
    
    
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shiyong:'',
        banner:'',
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      this.getbanner()
      this.jingxuan(1)
    },
    mounted(){
      
    },
    methods: {
      // 获取banner
      getbanner(){
        this.$get("api/gzh_order.php?action=exchange_ad", {
          id:11
        }).then(res => { 
          this.banner = res.data[0]
        }).catch(err => {

        });
      },
      // banner跳转
      tiaozhuan(url){
        window.location.href = url
      },
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.jingxuan(this.page)
        }, 500);
      },
      // 精选试用
      jingxuan(page){
        this.$get("api/gzh_order.php?action=exchange_list", {
          min:0,
          page:page,
          limit:20
        }).then(res => { 
          
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.shiyong = res.data
              }
              if(res.data.length>0&&res.data.length<20){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.shiyong.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<20){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },
      // 跳转药品详情页面
      details(id) {
        console.log(id,22222222222222)

        var uid = localStorage.getItem('uid')
        if (!uid) {
            // console.log(window.location.href)
            // console.log(this.$route.name)
            this.$router.replace({ name: 'login', params: { 'beforeurl': this.$route.name } })
        } else {
            console.log('已经登录')
            this.$router.push({  //核心语句
              path:'/jifenjiesuan',   //跳转的路径
              query:{            //路由传参时push和query搭配使用 ，作用时传递参数
                good_id:[id],  
              }
            })
        }

        
      },
      
    },
  }
</script>

<style scoped>
.free-trial{
  width: 100%;
}
.bg{
  width: 100%;
  height: 296px;
}
.bg img{
  width: 100%;
  height: 296px;
}





/* 分页 */
.box{
  width: 100%;
  height: calc(100% - 296px);
}
ul{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #F6F6F6;
}
li{
  width: 372px;
  height: 590px;
  text-align: center;
  margin-bottom: 6px;
  background: #fff;
}
li img{
  width: 100%;
  height: 340px;
  display: block;
}
li .p1,li .p2{
  font-size: 32px;
  color: #333;
}
li .p1{
  margin-top: 27px;
}
li .p1 span{
  font-size: 40px;
  color: #c94451;
}
li .p2{
  width: 191px;
  margin: auto;
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}
li .p3{
  font-size: 26px;
  color: #333;
  margin-top: 10px;
}
li .p4{
  width: 191px;
  height: 52px;
  background: #984db4;
  font-size: 32px;
  color: #fff;
  line-height: 52px;
  text-align: center;
  border-radius: 26px;
  margin: auto;
  margin-top: 15px;
}
</style>
<style>
  .van-list{
      height:80vh;
      width: 100%;
      /* overflow: hidden;
    overflow-y: scroll; */
  }
  .van-list__error-text, .van-list__finished-text, .van-list__loading, .van-pull-refresh__head{
    font-size: 28px;
  }
</style>